<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>公积金城市选择</title>
	<script type="text/javascript"src="js/flexible.js"></script>
	<script type="text/javascript"src="js/zepto.min.js"></script>
	<link rel="stylesheet"type="text/css"href="css/base.css">
	<link rel="stylesheet"type="text/css"href="css/flex.css">
	<style type="text/css">
		body,html{max-width:750px;margin:0 auto;}
    	.city{font-size:15px;color:#333;overflow:hidden}
		.city .wrap .search{background:#0099D9;padding:10px 0}
		.city .wrap .search .cont{background:#fff;padding:10px 0;border-radius:6px;width:9.333333rem;margin:0 auto}
		.city .wrap .search .cont img{width:.413333rem;margin-right:.133333rem}
		.city .wrap .search .cont input{width:3.4rem}
		.city .wrap .list{background:#fff;padding:0 .4rem;margin-bottom:10px}
		.city .wrap .list li{height:1.333333rem;padding:0 10px;border-bottom:1px solid #ddecfa}
		.city .wrap .list li .cir{width:16px;height:16px;display:inline-block;border:2px solid #ccc;border-radius:50%;position:relative}
		.city .wrap .list li .cir:after{content:'';width:12px;height:12px;background:#ccc;position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);border-radius:50%}
		.city .wrap .list li.active .cir{border:2px solid #0099d9}
		.city .wrap .list li.active .cir:after{background:#0099d9}
		.loading{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.2);z-index:1000;color:#fff;font-size:18px}
		.loading .img{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:4rem;height:3rem;background:rgba(0,0,0,.7);border-radius:10px}
		.loading .img img{width:3rem;margin-top:-20px}
		.loading .img p{margin-top:-6px;text-align: center;}
	</style>
</head>
<body>
	<div class="city">
		<!-- 主体内容 -->
		<div class="wrap">
			<div class="search">
				<div class="cont"flex="main:center cross:center">
					<input type='text'placeholder="请输入搜索城市">
				</div>
			</div>
			<ul class="list">
				<li flex="main:justify cross:center">
					<font>深圳</font><span class="cir"></span>					
				</li>
				<li flex="main:justify cross:center">
					<font>广州</font><span class="cir"></span>					
				</li>
				<li flex="main:justify cross:center">
					<font>广发</font><span class="cir"></span>					
				</li>
				<li flex="main:justify cross:center">
					<font>上海</font><span class="cir"></span>					
				</li>
				<li flex="main:justify cross:center">
					<font>上海2</font><span class="cir"></span>					
				</li>
			</ul>
		</div>
	</div>
	<div class="loading">
		<div class="img"flex="cross:center main:center">
			<div class="cen">
				<img src="images/loading.gif">
				<p>loading...</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$('.search input').on('input',function(){
			var this_=this;
			var inputV=$(this_).val().toString().substr(0,1);
			$('.list li').each(function(){
				if(inputV==$(this).find('font').text().toString().substr(0,1)){
					$(this).css('display','');
				}else if(inputV==''){
					$(this).css('display','');
				}else{
					$(this).hide();
				}
			});
		});
		$(window).on('load',function(){
			$('.loading').hide();
		});
		$('.list li').eq(0).addClass('active');
		$('.list li').on('click',function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.loading').show();
			setTimeout(function(){
				$('.loading').hide();
			},1400);
		});
	</script>
</body>
</html>